import React from 'react'
import { Button, InputItem, WhiteSpace, Radio, Toast } from 'antd-mobile'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import Footer from '../component/footer/footer'
import logo from '../login/logo-login.jpg'
import './index.css'
import { register } from '../../redux/user.redux'

class Register extends React.Component{
  constructor(props) {
    super(props)
    this.state={
      usernameStyle: '',
      passwrodStyle: '',
      confirmStyle: '',
      type: 'genius', // 用户角色,
      user: '',
      pwd: '',
      repeatpwd: ''
    }
  }

  // 
  handleChange = (name, v) => {
    this.setState({
      [name]: v
    })
  }
  // 获得焦点
  handleOnFocus(type) {
    if (type === 'username') {
      this.setState({
        usernameStyle: 'input_action'
      })
    } else if (type === 'password') {
      this.setState({
        passwrodStyle: 'input_action'
      })
    }
    else {
      this.setState({
        confirmStyle: 'input_action'
      })
    }
  }

  // 失去焦点
  handleOnBlur(type) {
    if (type === 'username') {
      this.setState({
        usernameStyle: ''
      })
    } else if (type === 'password') {
      this.setState({
        passwrodStyle: ''
      })
    }
    else {
      this.setState({
        confirmStyle: ''
      })
    }
  } 
  toast(text) {
    Toast.info(text, 1)
  }
  handleRegister = () => {
    const { user, pwd, repeatpwd,type } = this.state
    if (!user) {
      this.toast('请输入用户名！')
    } else {
      if (!pwd) {
        this.toast('密码不能为空！')
      } else {
        if (pwd !== repeatpwd) {
          this.toast('两次输入密码不一致！')
        } else {
          this.props.register({ user, pwd, type })
        }
      }
    }
  }
  
  // 返回登录
  handleLogin = () => {
    this.props.history.push('/login')
  }
  render() {
    const RadioItem = Radio.RadioItem
    const { usernameStyle, passwrodStyle, confirmStyle, type } = this.state
    const roleData = [
      { value: 'genius', label: '求职' },
      { value: 'boss', label: '招聘'  }
    ]
    return (
      <div className="wrap">
        { this.props.redirectTo ? <Redirect to={ this.props.redirectTo } /> : null}
        <div className="register-box">
          <div className="logoBox">
            <img src={logo} className="logo" alt=""/>
          </div>
          <InputItem 
            placeholder="请输入用户名" 
            onBlur={ this.handleOnBlur.bind(this, 'username') } 
            onFocus={ this.handleOnFocus.bind(this, 'username') }
            onChange={ v => this.handleChange('user', v) } 
            className={`input ${usernameStyle}`} 
          />
          <WhiteSpace size="md" />
          <InputItem 
            type="password"
            placeholder="请输入密码" 
            onBlur={ this.handleOnBlur.bind(this, 'password') } 
            onFocus={ this.handleOnFocus.bind(this, 'password') } 
            onChange={ v => this.handleChange('pwd', v) } 
            className={`input ${passwrodStyle}`} 
          />
          <WhiteSpace size="md" />
          <InputItem 
            type="password"
            placeholder="请输再次输入密码" 
            onBlur={ this.handleOnBlur.bind(this, 'confrim') } 
            onFocus={ this.handleOnFocus.bind(this, 'confrim') }
            onChange={ v => this.handleChange('repeatpwd', v) } 
            className={`input ${confirmStyle}`} 
          />
          <WhiteSpace size="md" />
          {
            roleData.map(item => <RadioItem onClick={ () => this.handleChange('type', item.value) } className="roleRadio" checked={ item.value === type } key={ item.value } >{ item.label }</RadioItem>)
          }
          <WhiteSpace size="md" />
          <Button onClick={this.handleRegister } type="primary" className="box register-button">注册</Button>
          <div className="notice">
            <span onClick={this.handleLogin} className="back-login">返回登录</span>
          </div>
        </div>
        <Footer />
      </div>
    )
  }
}

export default connect( state => state.user, { register })(Register)  